<div id="api-layout" class="easyui-layout" style="width:100%;height:100%;">
    <!-- 接口管理上侧按钮 -->
    <div data-options="region:'north',title:'North',split:true" style="height:80px;padding: 5px;">
        <!-- 接口编辑 -->
        <a id="api-btn-edit"></a>
        <!-- 编辑取消 -->
        <a id="api-btn-cancel"></a>
        <!-- 版本说明保存 -->
        <a id="api-btn-save"></a>
        <!-- 快速保存 -->
        <a id="api-btn-quick-save"></a>
        <!-- 查看接口版本列表 -->
        <a id="api-btn-version"></a>
        <!-- 回退最新版本 -->
        <a id="api-btn-version-back"></a>
        <input id="api-test-server-url" class="easyui-textbox" style="width:420px">
        <div style="float: right;">
            <a id="api-export-button" class="easyui-linkbutton"></a>
            <a id="api-bug-button" class="easyui-linkbutton"></a>
        </div>
    </div>
    <!-- 接口管理左侧树形列表 -->
    <div data-options="region:'west',title:'West',split:true" style="width:150px;">
        <ul id="api-tree"></ul>
        <div id="api-tree-tool-menu" class="easyui-menu" style="width:120px;">
        </div>
    </div>
    <!-- 接口管理中部信息 -->
    <div data-options="region:'center'">
        <div style="float: left;width: 49%;height: 100%;">
            <!-- 接口详细信息 -->
            <div class="easyui-panel" title="接口详情" style="width:100%;padding:10px;">
                <form id="api-form">
                    <div style="margin-bottom:10px">
                        <input id="api-form-id" class="easyui-textbox" name="id" data-options="label:'接口ID',disabled:true" style="width:100%">
                    </div>
                    <div style="margin-bottom:10px">
                        <input id="api-form-name" class="easyui-textbox" name="name" data-options="label:'接口名称',disabled:true" style="width:100%">
                    </div>
                    <div style="margin-bottom:10px">
                        <select id="api-form-content-type" class="easyui-combobox" name="contentType" style="width:100%">
                            <option value="application/x-www-form-urlencoded" selected="selected">application/x-www-form-urlencoded</option>
                            <option value="application/json">application/json</option>
                        </select>
                    </div>
                    <div style="margin-bottom:10px">
                        <input id="api-form-path" class="easyui-textbox" name="path" style="width:100%">
                    </div>
                    <div style="margin-bottom:10px">
                        <select id="api-form-method" class="easyui-combobox" name="method" style="width:100%">
                            <option value="GET" selected="selected">GET</option>
                            <option value="POST">POST</option>
                            <option value="PUT">PUT</option>
                            <option value="UPDATE">UPDATE</option>
                            <option value="DELETE">DELETE</option>
                        </select>
                    </div>
                    <div style="margin-bottom:10px">
                        <input id="api-form-intro" class="easyui-textbox" name="intro" style="width:100%;height:40px">
                    </div>
                </form>
            </div>
            <!-- 请求参数信息(左侧) -->
            <div style="height: 57%">
                <table id="api-req"></table>
                <div id="req-params-menu" class="easyui-menu" style="width:120px;">
                </div>
            </div>
            <!-- 测试请求header -->
            <div id="api-test-header-dialog" class="easyui-dialog" title="JSON导入" style="padding: 20px;">
                <form id="api-test-header-form">
                    <div style="margin-bottom:10px">
                        <input id="api-test-header-text" class="easyui-textbox" name="json" style="width:100%;height:320px">
                    </div>
                </form>
            </div>
        </div>
        <!-- 响应参数列表(右侧) -->
        <div style="float: right;width: 50%;height: 100%;">
            <table id="api-res"></table>
            <div id="res-params-menu" class="easyui-menu" style="width:120px;">
            </div>
        </div>
        <!-- 请求/响应参数添加对话框 -->
        <div class="easyui-dialog" id="api-parameter-dialog" style="padding:10px;">
            <form id="api-parameter-form">
                <div style="margin-bottom:10px">
                    <input id="api-parameter-name" data-options="label:'参数名:',required:true" class="easyui-textbox" name="name" style="width:95%">
                </div>
                <div style="margin-bottom:10px">
                    <select id="api-parameter-mandatory" data-options="label:'是否必填:',editable:false" class="easyui-combobox" name="mandatory" style="width:95%">
                        <option value="O" selected="selected">O</option>
                        <option value="M">M</option>
                    </select>
                </div>
                <div style="margin-bottom:10px">
                    <select id="api-parameter-type" data-options="label:'参数类型:',editable:false" class="easyui-combobox" name="type" style="width:95%">
                        <option value="string" selected="selected">string</option>
                        <option value="number">number</option>
                        <option value="boolean">boolean</option>
                        <option value="array[string]">array[string]</option>
                        <option value="array[number]">array[number]</option>
                        <option value="array[boolean]">array[boolean]</option>
                        <option value="array[object]">array[object]</option>
                        <option value="object">object</option>
                    </select>
                </div>
                <div style="margin-bottom:5px;height:240px;">
                    <input id="api-parameter-content" data-options="label:'参数含义:',multiline:true,height:220" class="easyui-textbox" name="content" style="width:95%;">
                </div>
                <div style="margin-bottom:5px">
                    <input id="api-parameter-remark" data-options="label:'备注(默认值):'" class="easyui-textbox" name="remark" style="width:95%;">
                </div>
            </form>
        </div>
        <!-- 导入JSON数据对话框 -->
        <div id="api-json-dialog" class="easyui-dialog" title="JSON导入" style="padding: 20px;">
            <form id="api-json-form">
                <div style="margin-bottom:10px">
                    <input id="api-json-text" class="easyui-textbox" name="json" style="width:100%;height:320px">
                </div>
            </form>
        </div>
        <!-- 接口版本列表对话框 -->
        <div id="api-version-dialog" class="easyui-dialog" style="padding: 20px;">
            <table id="api-version-table"></table>
        </div>
        <div id="api-version-history-dialog" class="easyui-dialog" title="修改详情" style="width:400px;height:200px;padding: 20px;" data-options="resizable:true,modal:true,closed:true">
        </div>
        <!-- 保存版本信息对话框 -->
        <div id="api-save-dialog" class="easyui-dialog" style="padding:20px;">
            <form id="api-save-form">
                <div style="margin-bottom:10px">
                    <select id="api-save-form-version" class="easyui-combobox" name="team_id" style="width:95%"></select>
                </div>
                <div style="margin-bottom:10px">
                    <input id="api-save-form-intro" class="easyui-textbox" name="introduction" style="width:95%;height:160px">
                </div>
            </form>
        </div>
        <!-- 选择目标对话框 -->
        <div id="api-template-dialog" class="easyui-dialog">
            <div class="easyui-layout" data-options="fit:true">
                <!-->左侧树形菜单</!-->
                <div data-options="region:'west',split:true" style="width:200px;height: 100%;">
                    <ul id="api-template-tree"></ul>
                </div>
                <!-->右侧模板详细信息</!-->
                <div data-options="region:'center'" style="height: 100%;">
                    <table id="api-template-table"></table>
                </div>
            </div>
        </div>
        <!-- 提示对话框 -->
        <div id="api-alert-dialog" class="easyui-dialog" style="padding: 20px;">
            <div>
                <input id="api-alert-text" class="easyui-textbox" name="alert" style="width:100%;height:380px;">
            </div>
        </div>
        <!-- 提交修改建议对话框 -->
        <div id="api-bug-dialog" class="easyui-dialog" style="padding: 20px;">
            <div>
                <input id="api-bug-text" class="easyui-textbox" name="bug" style="width:100%;height:380px;">
            </div>
        </div>
    </div>
</div>